<template>
	<view class="content">
		<!-- 顶部导航栏 -->
		<view  class="header" style=" position: fixed,top:0">
			<!-- 定位城市 -->
			<view class="addr">
				<view class="icon location"></view>
				成都
			</view>
			<!-- 搜索框 -->
			<view class="input-box">
				<input placeholder="默认关键字" placeholder-style="color:#c0c0c0;"  />
				<view class="icon search"></view>
			</view>
		
		</view>
		
		<sl-filter :ref="'slFilter'" :topFixed="true" :isTransNav="true" :navHeight="0" :color="titleColor" :themeColor="themeColor" :menuList="menuList"
		 @result="result"></sl-filter>
	    <scroll-view class="list">
			<view v-for="(zhuyong,index) in zhuyongs" :key="index" @tap="toDetail()">
				<zhuyong-item :options="zhuyong"></zhuyong-item>
			</view>
			
		</scroll-view>

		
		
		
		
		

		<view class="text">
			<text>{{filterResult}}</text>
		</view>


	</view>
</template>

<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	import zhuyongItem from './item.vue';
	
	export default {
		components: {
			slFilter,
			zhuyongItem
		},
		data() {
			return {
				themeColor: '#000000',
				titleColor: '#666666',
				filterResult: '',
				zhuyongs:[
					{
						Image:"/static/img/face.jpg",
						Name:"绿地新里城",
						Company:'恒大集团',
						Addr:'四川省成都市金牛区较大只能小区',
						Price:13000,
						Area:'金牛区',
						Type:'别墅',
						LookNum:10,
						CreateDate:'2019-08-30'
					},{
						Image:"/static/img/face.jpg",
						Name:"绿地新里城",
						Company:'恒大集团',
						Addr:'四川省成都市金牛区较大只能小区',
						Price:13000,
						Area:'金牛区',
						Type:'别墅',
						LookNum:10,
						CreateDate:'2019-08-30'
					},{
						Image:"/static/img/face.jpg",
						Name:"绿地新里城",
						Company:'恒大集团',
						Addr:'四川省成都市金牛区较大只能小区',
						Price:13000,
						Area:'金牛区',
						Type:'别墅',
						LookNum:10,
						CreateDate:'2019-08-30'
					},{
						Image:"/static/img/face.jpg",
						Name:"绿地新里城",
						Company:'恒大集团',
						Addr:'四川省成都市金牛区较大只能小区',
						Price:13000,
						Area:'金牛区',
						Type:'别墅',
						LookNum:10,
						CreateDate:'2019-08-30'
					},{
						Image:"/static/img/face.jpg",
						Name:"绿地新里城",
						Company:'恒大集团',
						Addr:'四川省成都市金牛区较大只能小区',
						Price:13000,
						Area:'金牛区',
						Type:'别墅',
						LookNum:10,
						CreateDate:'2019-08-30'
					},{
						Image:"/static/img/face.jpg",
						Name:"绿地新里城",
						Company:'恒大集团',
						Addr:'四川省成都市金牛区较大只能小区',
						Price:13000,
						Area:'金牛区',
						Type:'别墅',
						LookNum:10,
						CreateDate:'2019-08-30'
					},{
						Image:"/static/img/face.jpg",
						Name:"绿地新里城",
						Company:'恒大集团',
						Addr:'四川省成都市金牛区较大只能小区',
						Price:13000,
						Area:'金牛区',
						Type:'别墅',
						LookNum:10,
						CreateDate:'2019-08-30'
					},{
						Image:"/static/img/face.jpg",
						Name:"绿地新里城",
						Company:'恒大集团',
						Addr:'四川省成都市金牛区较大只能小区',
						Price:13000,
						Area:'金牛区',
						Type:'别墅',
						LookNum:10,
						CreateDate:'2019-08-30'
					},{
						Image:"/static/img/face.jpg",
						Name:"绿地新里城",
						Company:'恒大集团',
						Addr:'四川省成都市金牛区较大只能小区',
						Price:13000,
						Area:'金牛区',
						Type:'别墅',
						LookNum:10,
						CreateDate:'2019-08-30'
					},{
						Image:"/static/img/face.jpg",
						Name:"绿地新里城",
						Company:'恒大集团',
						Addr:'四川省成都市金牛区较大只能小区',
						Price:13000,
						Area:'金牛区',
						Type:'别墅',
						LookNum:10,
						CreateDate:'2019-08-30'
					}
				],
				menuList: [
					{
						'title': '区域',
						'key': 'Area',
						'isSort': true,
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'detailList': [{
								'title': '区域',
								'value': ''
							},
							{
								'title': '锦江区',
								'value': '锦江区'
							},
							{
								'title': '高新区',
								'value': '高新区'
							},
							{
								'title': '天府新区',
								'value': '天府新区'
							}
						]
					},
					{
						'title': '时间',
						'key': 'Price',
						'isSort': true,
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'detailList': [{
								'title': '不限',
								'value': ''
							},
							{
								'title': '一月',
								'value': '1'
							},
							{
								'title': '二月',
								'value': '2'
							},
							{
								'title': '三月',
								'value': '3'
							},
							{
								'title': '四月',
								'value': '4'
							},
							{
								'title': '五月',
								'value': '5'
							},
							{
								'title': '六月',
								'value': '6'
							},
							{
								'title': '七月',
								'value': '7'
							},
							{
								'title': '八月',
								'value': '8'
							},
							{
								'title': '九月',
								'value': '9'
							},
							{
								'title': '十月',
								'value': '10'
							},
							{
								'title': '十一月',
								'value': '11'
							},
							{
								'title': '十二月',
								'value': '12'
							}
						]
					},
					
				]
			}
		},
		onLoad() {

		},
		methods: {
			result(val) {
				console.log('filter_result:' + JSON.stringify(val));
				this.filterResult = JSON.stringify(val, null, 2)
			},
			// 重置所有选项，包括默认选项，并更新result
			resetAllSelect() {
				this.$refs.slFilter.resetAllSelect(function(result){
					console.log('重置之后回调的result:'+JSON.stringify(result))
				})
			},
			// 重置选项为设置的默认值，并更新result
			resetSelectToDefault() {
				this.$refs.slFilter.resetSelectToDefault(function(result){
					console.log('重置为默认值之后回调的result:'+JSON.stringify(result))
				})
			},
			toDetail(){
				uni.navigateTo({
					url:'/pages/zhuiyong/detail/detail'
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.content{
		
		.header {
			width: 100%;
			padding: 0 4%;
			height: 100upx;
			display: flex;
			align-items: center;
			position: fixed;
			/* #ifdef H5 */
			
			top: 44px;
			/* #endif */
			/* #ifndef H5 */
			top: 0;
			/* #endif */
			z-index: 10;
			background-color: #fff;
		
			/*  #ifdef  APP-PLUS  */
			top: var(--status-bar-height);
			/*  #endif  */
		
			.addr {
				width: 120upx;
				height: 60upx;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				font-size: 28upx;
		
				.icon {
					height: 60upx;
					margin-right: 5upx;
					display: flex;
					align-items: center;
					font-size: 42upx;
					color: #ffc50a;
				}
			}
		
			.input-box {
				width: 100%;
				height: 60upx;
				background-color: #f5f5f5;
				border-radius: 30upx;
				position: relative;
				display: flex;
				align-items: center;
		
				.icon {
					display: flex;
					align-items: center;
					position: absolute;
					top: 0;
					right: 0;
					width: 60upx;
					height: 60upx;
					font-size: 34upx;
					color: #c0c0c0;
				}
		
				input {
					padding-left: 28upx;
					height: 28upx;
					font-size: 28upx;
				}
			}
		
			.icon-btn {
				width: 120upx;
				height: 60upx;
				flex-shrink: 0;
				display: flex;
		
				.icon {
					width: 60upx;
					height: 60upx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 42upx;
				}
			}
		}
		.list{
			margin-top:48px;
			
		}
	}
	
	.text {
		margin-top: 50px;
		margin-left: 20px;
		width: 100%;
	}
</style>
